<template>
  <div class="mall-wrap">
    <div class="mall">
      <div class="inner"></div>
      <div class="outer"></div>
      <!-- <img class="conent" src="@/assets/bigscreen2/mall_content.png" alt="" /> -->
      <div class="conent"></div>
      <!-- 左下 -->
      <div class="item1">
        <div class="icon1"></div>
        <div class="title1">
          <span class="point"></span>
          <span class="text">内部贸易公司</span>
          <span class="point"></span>
        </div>
      </div>
      <!-- 左上 -->
      <div class="item2">
        <div class="icon2"></div>
        <div class="title2">
          <span class="point"></span>
          <span class="text">外部卖家</span>
          <span class="point"></span>
        </div>
      </div>
      <!-- 右下 -->
      <div class="item3">
        <div class="icon3"></div>
        <div class="title3">
          <span class="point"></span>
          <span class="text">内部项目</span>
          <span class="point"></span>
        </div>
      </div>
      <!-- 右上 -->
      <div class="item4">
        <div class="icon4"></div>
        <div class="title4">
          <span class="point"></span>
          <span class="text">外部材料供应商</span>
          <span class="point"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

</script>
<style scoped lang='scss'>
.mall-wrap {
  height: 321px;
  .mall {
    height: 321px;
    position: relative;
    .inner {
      position: absolute;
      width: 680px;
      height: 680px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background: url("@/assets/bigscreen2/in.png");
      background-size: 108% 108%;
      background-position: center center;
      animation: rotate-in 70s linear infinite;
      transform: rotateX(65deg);
    }
    .outer {
      position: absolute;
      width: 680px;
      height: 680px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background: url("@/assets/bigscreen2/out.png");
      background-size: 100% 100%;
      background-position: center center;
      animation: rotate-out 70s linear infinite;
      transform: rotateX(65deg);
    }
    .conent {
      position: absolute;
      left: 50%;
      top: 63px;
      width: 177px;
      height: 190px;
      transform: translateX(-50%);
      background: url("@/assets/bigscreen2/mall_content.png");
      background-position: center center;
      background-size: 100% 100%;
      z-index: 3;
    }
    .text{
      font-size: 18px;
    }

    // 左下
    .item1 {
      width: 180px;
      height: 180px;
      top: 134px;
      left: 100px;
      position: absolute;
      background-image: url("@/assets/bigscreen2/圆柱底座.png");
      background-size: 100% 100%;
      
      .icon1 {
        width: 100px;
        height: 100px;
        position: absolute;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 60% 60%;
        left: 36px;
        top: -19px;
        background-image: url("@/assets/bigscreen2/mall_内部贸易公司.svg");
        z-index: 2;
        animation: moveUpDown2 4s ease-in-out infinite;
      }
      .title1 {
        width: 158px;
        height: 44px;
        color: #e1e9e9;
        position: absolute;
        top: 30px;
        left: -96px;
        background-image: url("@/assets/bigscreen2/mall_title.png");
        background-size: 100% 99%;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .text {
          padding: 0 10px;
        }
        .point {
          display: block;
          width: 4px;
          height: 4px;
          background: #c2fefa;
          margin-top: 2px;
        }
      }
    }
    // 左上
    .item2 {
      width: 180px;
      height: 180px;
      background-image: url("@/assets/bigscreen2/六边形底座.png");
      background-size: 100% 100%;
      top: -40px;
      left: 150px;
      position: absolute;
      .icon2 {
        width: 100px;
        height: 100px;
        position: absolute;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 60% 60%;
        left: 41px;
        top: -19px;
        background-image: url("@/assets/bigscreen2/mall_外部卖家.svg");
        z-index: 2;
        animation: moveUpDown 4s ease-in-out infinite;
      }

      .title2 {
        width: 158px;
        height: 44px;
        color: #e1e9e9;
        position: absolute;
        top: 30px;
        left: -96px;
        background-image: url("@/assets/bigscreen2/mall_title.png");
        background-size: 100% 99%;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .text {
          padding: 0 10px;
        }
        .point {
          display: block;
          width: 4px;
          height: 4px;
          background: #c2fefa;
          margin-top: 2px;
        }
      }
    }

    //右下
    .item3 {
      width: 180px;
      height: 180px;
      background-image: url("@/assets/bigscreen2/方形底座.png");
      background-size: 100% 100%;
      top: 134px;
      right: 100px;
      position: absolute;
      .title3 {
        width: 158px;
        height: 44px;
        color: #e1e9e9;
        position: absolute;
        top: 30px;
        right: -92px;
        background-image: url("@/assets/bigscreen2/mall_title.png");
        background-size: 100% 99%;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .text {
          padding: 0 10px;
        }
        .point {
          display: block;
          width: 4px;
          height: 4px;
          background: #c2fefa;
          margin-top: 2px;

        }
      }
      .icon3 {
        width: 100px;
        height: 100px;
        position: absolute;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 60% 60%;
        left: 40px;
        top: -24px;
        background-image: url("@/assets/bigscreen2/mall_内部项目.svg");
        z-index: 2;
        animation: moveUpDown 4s ease-in-out infinite;
      }
    }
    // 右上
    .item4 {
      width: 180px;
      height: 180px;
      background-image: url("@/assets/bigscreen2/圆柱底座.png");
      background-size: 100% 100%;
      top: -40px;
      right: 150px;
      position: absolute;
      .icon4 {
        width: 100px;
        height: 100px;
        position: absolute;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 60% 60%;
        right: 41px;
        top: -19px;
        background-image: url("@/assets/bigscreen2/mall_外部材料供应商.svg");
        z-index: 2;
        animation: moveUpDown2 4s ease-in-out infinite;
      }
      .title4 {
        width: 158px;
        height: 44px;
        color: #e1e9e9;
        position: absolute;
        top: 30px;
        right: -106px;
        background-image: url("@/assets/bigscreen2/mall_title.png");
        background-size: 100% 99%;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .text {
          padding: 0 10px;
        }
        .point {
          display: block;
          width: 4px;
          height: 4px;
          background: #c2fefa;
          margin-top: 2px;

        }
      }
    }

    @keyframes rotate-in {
      0% {
        transform: rotateX(65deg) rotateZ(0deg);
      }
      100% {
        transform: rotateX(65deg) rotateZ(360deg);
      }
    }

    @keyframes rotate-out {
      0% {
        transform: rotateX(65deg) rotateZ(100deg);
      }
      100% {
        transform: rotateX(65deg) rotateZ(-360deg);
      }
    }

    @keyframes moveUpDown {
      0%,
      100% {
        transform: translateY(0);
        /* 初始位置和结束位置：不改变位置 */
      }

      50% {
        transform: translateY(-20px);
        /* 中间位置：向上移动50px */
      }
    }

    @keyframes moveUpDown2 {
      0%,
      100% {
        transform: translateY(-20px);
        /* 初始位置和结束位置：不改变位置 */
      }

      50% {
        transform: translateY(0);
        /* 中间位置：向上移动50px */
      }
    }
  }
}
</style>